<template>
  <div class="divBox">
    <el-row :gutter="24" class="mb20">
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">燃气剩余量趋势</div>
              </div>
            </div>
          </div>
          <div id="chart1" class="chart" style="height: 300px;background-color: #fff;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card :bordered="false" class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <div class="header_title">用户增长趋势</div>
              </div>
            </div>
          </div>
          <div style="height: 300px;background-color: #fff;" class="chart" id="chart2"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-card :bordered="false" class="dashboard-console-visit" style="margin-top: 20px;">
      <div slot="header">
        <div class="acea-row row-between-wrapper">
          <div class="acea-row row-middle">
            <div class="header_title">30天缴费金额</div>
          </div>
        </div>
      </div>
      <div style="height: 300px;background-color: #fff;" class="chart" id="chart3"></div>
    </el-card>
  </div>
</template>
<script>
import {checkPermi} from "@/utils/permission";
import {chargingAmount, userGrowthTrend} from "@/api/dashboard"; // 权限判断函数

export default {
  data() {
    return {
      infoList: null,
      seriesType: [],
      stationList: [],
      stationId: 17,
      station: null,
      value1: '',
      sTime: '',
      eTime: ''
    }
  },
  methods: {
    checkPermi,
    handleResize() {
      if (this.infoList) this.$refs.visitChart.handleResize();
    },
    initChart1() {
      let charts = this.$echarts.init(document.getElementById('chart1'));
      charts.showLoading({
        text: '加载中',
        textColor: '#ooo',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              let ret = '';
              const maxLength = 3;
              const valLength = value.length;
              const rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (let i = 0; i < rowN; i++) {
                  let temp = '';
                  const start = i * maxLength;
                  const end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        grid: {
          top: 20,
          left: 60,
          right: 10,
          bottom: 40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#000',
              fontSize: 14
            }
          },
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: 17,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#ccc',
                    fontSize: 14
                  }
                },
                barBorderRadius: [15, 15, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#6EA3FF'
                }, {
                  offset: 1,
                  color: '#197CFD'
                }])
              }
            }
          }
        ]
      }
      // chargingFrequencyTrend().then((res) => {
      //   console.log(res)
        option.xAxis.data = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        option.series[0].data = [794, 803, 742, 201, 770, 780, 803];
        charts.hideLoading();
        charts.setOption(option)
      // })
    },
    initChart2() {
      let charts = this.$echarts.init(document.getElementById('chart2'));
      charts.showLoading({
        text: '加载中',
        textColor: '#ooo',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        backgroundColor: 'white',
        grid: {
          top: 20,
          left: 60,
          right: 10,
          bottom: 40
        },

        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: [],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
            }
          },
          axisLabel: {
            color: '#86909C',
            fontSize: 12,
          },
        },
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            color: "#000",
            fontSize: 14,
            padding: [0, 0, 0, 30]
          },
          axisLabel: {
            color: '#4E5969',
            fontSize: 12
          },
          splitLine: {     //网格线
            "show": false,
          }
        }],
        series: [
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: "#4080FF",
                width: 2
              },
            },
          }
        ]
      }
      userGrowthTrend().then((res) => {
        option.xAxis.data = res.day
        option.series[0].data = res.activeFrequency;
        charts.hideLoading();
        charts.setOption(option)
      })
    },
    initChart3() {
      let charts = this.$echarts.init(document.getElementById('chart3'));
      charts.showLoading({
        text: '加载中',
        textColor: '#ooo',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              let ret = '';
              const maxLength = 5;
              const valLength = value.length;
              const rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (let i = 0; i < rowN; i++) {
                  let temp = '';
                  const start = i * maxLength;
                  const end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        grid: {
          top: 20,
          left: 60,
          right: 10,
          bottom: 40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: '#000',
              fontSize: 14
            }
          },
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: 17,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#ccc',
                    fontSize: 14
                  }
                },
                barBorderRadius: [15, 15, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#6EA3FF'
                }, {
                  offset: 1,
                  color: '#197CFD'
                }])
              }
            }
          }
        ]
      }
      chargingAmount().then((res) => {
        option.xAxis.data = res.day
        option.series[0].data = res.paymentAmountList;
        charts.hideLoading();
        charts.setOption(option)
      })
    },
  },
  mounted() {

    this.initChart1()
    this.initChart2()
    this.initChart3()
  },
  created() {
  }
}
</script>
<style lang="scss" scoped>
.acea-row {
  ::v-deep.el-avatar--small {
    width: 22px;
    height: 22px;
    line-height: 22px;
  }
}

.special-chat {
  width: 100%;
  height: 294px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .special-chat-box {
    width: 100%;
    position: absolute;

    .line-box {
      height: calc(294px / 3);
      line-height: calc(294px / 3);
      display: flex;
      justify-content: space-around;

      .chat-line {
        font-size: 18px;
        font-weight: bold;
      }

      .chat-line:nth-child(2) {
        color: #fff;
        padding-left: 20%;
      }
    }
  }
}

.header_title {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  //padding-left:8px;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    width: 0px;
    height: 18px;
    background: #1890FF;
    top: 0;
    left: 0;
  }
}

.checkTime {
  ::v-deep.el-radio__input {
    display: none;
  }
}

.ivu-pl-8 {
  margin-left: 8px;
  font-size: 14px;
}

.divBox {
  padding: 0 20px !important;
}

.dashboard-console-visit {
  ::v-deep.el-card__header {
    padding: 14px 20px !important;
  }

  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}

.ivu-mb {
  margin-bottom: 10px;
}
</style>
